<template>
  <div class="container">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider :trigger="null" collapsible>
        <div class="logo" />
        <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
          <a-sub-menu key="sub1" @click="handelClickLink">
            <span slot="title">
              <a-icon type="user" />默认分组
            </span>
            <a-menu-item key="test">
              test
            </a-menu-item>
            <a-menu-item key="test2">
              test2
            </a-menu-item>
            <a-menu-item key="test3">
              test3
            </a-menu-item>
            <a-menu-item key="test4">
              test4
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handelClickLink(item) {
      console.log(item.key)
      this.$router.push('/' + item.key)
    }
  }
}
</script>

<style scoped>
#components-layout-demo-custom-trigger {
  height: 100vh;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>